 
import {getBaseUrl, getHtmlContent } from './httpServer' 
import { APP, AppCss, AppJs } from './types';
 

type GetJsModule=(baseUrl:string,contain:HTMLElement)=>Promise<Array<AppJs>>
type GetCssModule=(baseUrl:string,contain:HTMLElement)=>Promise<Array<AppCss>>
type ChangeStringToDom=(htmlStr:string,html:string,name:string)=>Promise<{contain:HTMLElement,jsData:Array<AppJs>,cssData:Array<AppCss>}>

 
/**
 * 改变微应用输入dom文档js与css
 * @param baseUrl 
 * @param name 
 * @returns 
 */
export const changeStringToDom:ChangeStringToDom=async (baseUrl:string,html:string,name:string)=>{
    // const html = await getHtmlContent(baseUrl);
    const contain= document.createElement('div')
    contain.id='_esbuild_micro_'+name;
    contain.innerHTML=html; 
    const jsData = await getChangeJsModule(baseUrl,contain);
    const cssData = await getChangeCssModule(baseUrl, contain); 
    return {contain,jsData,cssData}
} 
/**
 * 获取并替换js模块
 * @param baseUrl 
 * @param contain 
 * @returns 
 */
export const getChangeJsModule:GetJsModule=async (baseUrl,contain:HTMLElement) => {  
  const moduleTags = contain.querySelectorAll('script[type=module]');
  const modulePreload = contain.querySelectorAll('link[rel=modulepreload]'); 
  
  const app:Array<AppJs>=[]
  for(let i=0;i<modulePreload.length;i++){
    const moduleTag=modulePreload[i] as HTMLLinkElement ;
    const name=moduleTag.href.substring(moduleTag.href.lastIndexOf('/')+1)
    const href=moduleTag.href.replace(getBaseUrl(""),baseUrl);
   // const content= await getHtmlContent(href);  动态载入按照import 约定
    app.push({name:name ,url:href,content: ""}) 
    contain.removeChild(moduleTag);
  } 
  for(let i=0;i<moduleTags.length;i++){
    const moduleTag=moduleTags[i] as HTMLScriptElement;
    const name=moduleTag.src.substring(moduleTag.src.lastIndexOf('/')+1)
    const src=moduleTag.src.replace(getBaseUrl(""),baseUrl);
    //const content= await getHtmlContent(src)    动态载入按照import 约定
    app.push({name:name ,url:src,content:""}) 
    contain.removeChild(moduleTag);
  } 
  console.log('app',{app})
  return app
}

/**
 *  获取并替换css模块
 * @param baseUrl 
 * @param contain 
 * @returns 
 */
export const getChangeCssModule:GetCssModule = async (baseUrl,contain:HTMLElement) => {  
  const moduleTags = contain.querySelectorAll('link[rel=stylesheet]');
  if (!moduleTags || !moduleTags.length) {
    return;
  }
  const app:Array<AppCss>=[]
  for(let i=0;i<moduleTags.length;i++){
    const moduleTag=moduleTags[i] as HTMLLinkElement;
    const name=moduleTag.href.substring(moduleTag.href.lastIndexOf('/')+1)
    const href=moduleTag.href.replace(getBaseUrl(""),baseUrl);
    app.push({name:name ,url:href}) 
    await loadReplaceCss(contain,moduleTag, href, name);
  } 
  return  app
}



/**
 * 获取并替换地址内css
 * @param contain  主模块
 * @param moduleTag 需要替换的模块
 * @param url 请求地址
 * @param keyId 编号
 */
export const loadReplaceCss = async (contain:HTMLElement,moduleTag:HTMLLinkElement,url, keyId) => { 
  const css=await getHtmlContent(url)
  const style=document.createElement('style');
  style.id=keyId;
  style.innerHTML=css;  
  moduleTag.removeAttribute('href');
  contain.insertBefore(style,moduleTag);
  contain.removeChild(moduleTag);  
}
/**
 * 加载css并写入header
 * @param url 
 * @param keyId  id号
 */
export const loadCssToHeader = async (url, keyId) => {
  const script = document.createElement('link');
  script.type = 'module';
  script.id = keyId;
  script.href = url;
  document.head.append(script)
}

/**
 *  加载公共js
 * @param url 
 * @param keyId 
 */
export const loadCommonScript = async (url, keyId) => {
  const link = document.createElement('link');
  link.rel = 'modulepreload';
  link.id = keyId;
  link.innerHTML=await getHtmlContent(url);
  document.head.append(link)
}
/**
 *  加载应用js
 * @param url 
 * @param keyId 
 */
export const loadModuleScript = async (url, keyId) => {
  const script = document.createElement('script');
  script.type = 'module';
  script.id = keyId;
  script.innerHTML=await getHtmlContent(url);
  document.head.append(script)
}
